<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>服务管理</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="../../common/css/bootstrap.min.css" rel="stylesheet" />
		<link href="../../common/css/bootstrap.css" rel="stylesheet" media="screen" />
	</head>

	<body>
		<article>
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span12">
						<legend>医疗服务</legend>
						<!--<h3>住宿详情</h3>-->
						<ul class="breadcrumb">
							<li>
								<a href="#">主页</a> <span class="divider">/</span>
							</li>
							<li>
								<a href="#">服务管理</a> <span class="divider">/</span>
							</li>
							<li class="active">
								医疗服务</a>
							</li>
						</ul>

						<div class="row-fluid">
							<div class="span4">
								<button class="btn" type="button" @click="addNewDoctor">新增</button>
							</div>
							<div class="span8">
								<form class="form-search">
									<input class="input-medium search-query" type="text" v-model="key" placeholder="请输入查询信息" />
									<button @click.prevent="elderBeds" class="primary">查询</button>
								</form>
							</div>
						</div>

						<table class="table">
							<thead>
								<tr>
									<th>序号</th>
									<th>住户</th>
									<th>医生</th>
									<th>护理原因</th>
									<th>护理时间</th>
									<th>结束时间</th>
									<th>分配人</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="rowsEL" v-if="result!=null">
								<tr v-for="(row,i) in result.rows">
									<td>{{i+1}}</td>
									<td>{{row.elderId}}</td>
									<td>{{row.doctorId}}</td>
									<td>{{row.reason}}</td>			
									<td>{{row.createTime}}</td>
									<td>{{row.endTime}}</td>
									<td>{{row.createUserId}}</td>
									<td><button class="btn" ><a :href="'modDoctor.html?id='+row.id">点击操作</a></button>
									</td>
								</tr>

							</tbody>
						</table>
						<article class="pagination" v-if="result">
							<div>
								<span>共<b>{{result.totalRows}}</b>条记录</span>
								<span>每页<b>{{result.pageSize}}</b>条</span>
								<span>共<b>{{result.totalPages}}</b>页</span>
							</div>

							<div class="pagination.pagination-right" >
								<a href="javascript:" @click="gotoPage(1)">首页</a>
								<a href="javascript:" @click="gotoPage(result.pageNo-1)">上一页</a>
								<b id="pageNoEL">{{result.pageNo}}</b>
								<a href="javascript:" @click="gotoPage(result.pageNo+1)">下一页</a>
								<a href="javascript:" @click="gotoPage(result.totalPages)">末页</a>
							</div>
						</article>
					</div>

				</div>
			</div>
		</article>
		<script src="../../common/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../common/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://code.jquery.com/jquery.js"></script>
		<script src="../../js/bootstrap.js"></script>

		<script>
			const app = new Vue({
				el: "body>article",
				data: {
					key: null,
					result: null
				},
				watch: {
					"result.pageSize": function(newV, oldV) {
						//this.gotoPage(this.result.pageNo,newV);
					}
				},
				methods: {
					elderBeds: function(pageNo) {
						axios.get("/elderdoctor/list", {
								params: {
									key: this.key,
									pageNo: pageNo,
									pageSize: 6
								}
							})
							.then(function(resp) {
								if(resp.code === "ok") {
									app.result = resp.data;
								}
							});
					},
					addNewDoctor(){
						location.href = "addDoctor.html";
					}
				}
			});
		</script>

	</body>

</html>